<template>
  <div class="home">
    <div class="head p-w-40 flex align-center">
      <div class="flex justify-space-between align-center w-100 ">
        <dl class="flex">
          <dt>
            <img
              class="avatar radius"
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              alt=""
            />
          </dt>
          <dd class="flex align-center">
            <span class="m-l-20">陈**</span>
            <div class="level m-l-10">
              <img src="@icon/大众.png" />
            </div>
          </dd>
        </dl>
        <div class="vip-entry">
          会员权益专区
        </div>
      </div>
    </div>
    <div class="banner-box">
      <div class="swiper-container" id="banner">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide card level1"
            v-for="(item, index) in 1"
            :key="index"
          >
            <div class="card-head">
              <div class="card-head__logo">
                <img src="@icon/logo-w.png" slot="title" alt="" />
              </div>
              <div class="card-head__number">6688****6088</div>
              <div class="card-head__btn">
                <img
                  src="@icon/arrow-b-w.png"
                  alt="点击展开"
                  @click="handleSelectCard"
                  slot="title"
                />
              </div>
              <div class="card-head__tips">待还款</div>
            </div>
            <div class="card-body">
              <p>本期剩余应还</p>
              <div class="amount">
                523.00
              </div>
            </div>
            <div class="card-foot">
              <p>还款日04/28</p>
              <p>本期账单金额￥123.45</p>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-pagination"></div>
    </div>

    <div class="p-w-40">
      <div class="page-notice p-w-20 flex justify-space-between align-center">
        <span>您还差6笔消费即可享受免年费政策</span>
        <button>详情查看</button>
      </div>

      <div class="flex justify-space-between m-t-30 reimbursement">
        <div class="btn btn-out btn-warning">
          分期还款
        </div>
        <div class="btn btn-out" @click="_goPage('billRepayment')">
          还款
        </div>
      </div>
    </div>

    <ul class="bill-app__entry flex justify-space-between ">
      <li @click="_goPage('happenBill')">
        <img src="@icon/bill-1.png" alt="" />
        <span>已出账单</span>
      </li>
      <li>
        <img src="@icon/bill-2.png" alt="" />
        <span>未出账单</span>
      </li>
      <li @click="_goPage('historyDetail')">
        <img src="@icon/bill-3.png" alt="" />
        <span>历史明细</span>
      </li>
    </ul>

    <div class="p-w-40">
      <div class="title m-t-80">热门推荐</div>
      <ul class="hot-list">
        <li>
          <div class="text">
            <span>全球足迹</span>
            <p>我的旅行记录</p>
          </div>
          <img src="@icon/组 8@2x.png" alt="" />
        </li>
        <li>
          <div class="text">
            <span>乐玩积分</span>
            <p>积分兑好礼</p>
          </div>
          <img src="@icon/新品尝鲜@2x.png" alt="" />
        </li>
        <li>
          <div class="text">
            <span>消费分析</span>
            <p>花费尽在掌握</p>
          </div>
          <img src="@icon/组 8 拷贝@2x.png" alt="" />
        </li>
      </ul>
      <div class="hot-notice flex align-center m-t-30">
        <img src="@icon/tips.png" />
        <div class="swiper-container" id="tips-banner">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in 4" :key="index">
              <p class="tips-text">
                {{ `您有一张信用卡待激活, 激活有好礼。${index}` }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-w-40">
      <div class="title m-t-80 flex  justify-space-between">
        <div>优惠活动</div>
        <div class="operation" @click="_goPage('activity')">
          全部活动
        </div>
      </div>
      <div class="adv">
        <img src="@icon/新品尝鲜@2x.png" alt="" />
        <p>申请农行腾讯联名卡抽腾讯视频会员,100%中奖</p>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { globalMethods } from "../common/mixins.js";

export default {
  name: "Home",
  mixins: [globalMethods],
  mounted() {
    // swiper 建议在数据请求完成之后，进行初始化操作
    const banner = new Swiper("#banner", {
      centeredSlides: true,
      slidesPerView: "auto",
      spaceBetween: 10,
      pagination: {
        bulletClass: "banner-bullet",
        bulletActiveClass: "banner-bullet__active",
        el: ".banner-pagination"
      }
    });
    /**
     *  swiper 更新的方法 会重新计算swiper的宽度和数量
     *  banner.update()
     * */

    console.log(banner);
    new Swiper("#tips-banner", {
      loop: true,
      autoplay: true,
      delay: 3500,
      direction: "vertical"
    });
  },
  methods: {
    handleSelectCard() {
      const column1 = [
        { text: "6688****6088", value: "1" },
        { text: "6688****6018", value: "2" },
        { text: "6688****4088", value: "3" }
      ];
      if (!this.picker) {
        this.picker = this.$createPicker({
          data: [column1],
          onSelect: () => {
            console.log(1);
          },
          onCancel: () => {
            console.log("取消");
          }
        });
      }
      this.picker.show();
    }
  }
};
</script>

<style lang="stylus" scope>
#tips-banner
  height 32px
  width 100%
  margin-left 16px
  .tips-text
    font-size 24px
.dropdown-menu
  top -248px
.adv
  margin 37px 0
  img
    height 200px
    width 100%
    border-radius 20px
  p
    font-size 28px
    color #333
    margin-top 22px
.banner-box
  position relative
.hot-notice
  img
    width 30px
    height 24px
  span
    font-size 24px
    color #333
    margin-left 16px
    flex 1

.hot-list
  margin-top 46px
  display flex
  justify-content space-between
  li
    width 206px
    position relative

    .text
      position absolute
      padding 20px
      span
        font-size 30px
        color #333
      p
        font-size 26px
        color #777

.bill-app__entry
  margin-top 64px
  li
    flex 1
    display flex
    justify-content center
    align-items center
    flex-direction column
    img
      margin-bottom 24px
      width 48px

.reimbursement
  .btn
    width 314px

.banner-bullet
  width 10px
  height 10px
  background #E5E5E5
  border-radius 10px
  display block
  margin 0 10px

  &__active
    width 20px
    background #ABABAB

.banner-pagination
  display flex
  justify-content center
  align-items center
  height 50px

.page-notice
  height 70px
  background #F5F5F5
  border-radius 10px
  font-size 26px

  button
    width: 117px;
    height: 40px;
    background: #FFFFFF;
    border 1.5px solid currentColor;
    border-radius: 20px;
    font-size 24px
    color: #FFA900

.card
  width: 670px !important;
  height: 300px !important;
  background: linear-gradient(135deg, #E6BD6B 14.000000000000002%, #B6884A 100%);
  border-radius: 20px;
  padding 33px
  box-sizing border-box
  color #fff
  position relative
  //overflow hidden
  display flex
  flex-direction column
  justify-content space-between

  &.level1
    background: url("../assets/icon/大众.jpg")
    background-size: 100%

  &-foot
    display flex
    justify-content space-between
    font-size 28px

  &-body
    p
      font-size 28px
    .amount
      font-size 58px

      &::before
        content '￥'
        font-size 28px

  &-head
    display flex
    height 48px
    align-items center
    &__logo
      width 30px
      height 30px
      overflow hidden
    &__number
      margin 0 16px
    &__btn
      width 48px
      height 48px
    &__tips
      position absolute
      right 0
      top 0
      font-size 26px
      padding 8px 24px 12px 19px

.head
  height 137px

.avatar
  width: 64px;
  height: 64px;

.level
  width: 140px;
  height: 30px;

.vip-entry
  width: 174px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #333333;
  border-radius: 10px;
  font-size: 26px;
  display flex
  justify-content center
  align-items center
</style>
